<template>
	<view class="memberquanyi">
		<headertop title="会员权益" :back1="back1"></headertop>
		<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11453@2x.png" class="backimg" mode="">
		</image>
		<view class="bottomcontent">
			<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11454@2x.png"
				class="bottomcontentback" mode=""></image>
			<view class="usercontent">
				<view class="leftbox">
					<view class="userline">
						<image :src="contentobj.user.avatar" class="avtar" mode=""></image>
						<view class="usertext" v-if="contentobj.user">
							<view class="t1">
								{{contentobj.user.nickname}}
							</view>
							<view class="t2" v-if="contentobj.user.levelend">
								会员有效期至：{{timestampfun(contentobj.user.levelend*1000)}}
							</view>
						</view>
					</view>
					<view class="images">
						<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(47).png" class="img1"
							mode=""></image>
						<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/VIP会员@2x.png" class="img2"
							mode=""></image>
					</view>
				</view>
				<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/image@2x(10).png" class="rightimg"
					mode=""></image>
			</view>
			<view class="goumaiquanyi">

			</view>
			<view class="quanyiboxs">
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
					<view id="demo1" @click="active=index"
						:class="active==index?'scroll-view-item_H dise':'scroll-view-item_H'"
						v-for="(item,index)  in  contentobj.vip" :key="item.id">
						<view class="rightbox" v-if="item.tuijian==1">
							最受欢迎
						</view>
						<view :class="active==index?'title active':'title'">
							{{item.title}}
						</view>
						<view class="jiage active">
							<span style="font-size: 24rpx;">￥</span>
							{{item.price}}
						</view>
						<view class="hxjg">
							￥{{item.yprice}}
							<view class="hx">

							</view>
						</view>
						<view class="xsyhbox back">
							享受{{item.zhekou}}折优惠
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="quanyisshuom">
				<view class="headerbox">
					<view class="box">

					</view>
					<span>权益说明</span>
				</view>
				<view class="miaoshu">
					{{active==-1?contentobj.vip_detail:contentobj.vip[active]['filedetail']}}
				</view>
			</view>
			<view class="" style="height: 184rpx;">
			</view>
		</view>
		<view class="fixedbox">
			<view class="centerbox" @click="lijikaitong">
				立即开通
			</view>
		</view>
	</view>
</template>

<script setup>
	import headertop from '@/components/header.vue'
	import {
		memberinfo,
		viporder
	} from '@/api/my.js'
	import {
		onPageScroll,
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref
	} from 'vue'
	const contentobj = ref({})
	const active = ref(-1)
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = '#84BD78'
		} else {
			back1.value = ''
		}
	})
	onLoad((opt) => {
		memberinit(opt.id)
	})
	async function memberinit(id) {
		const res = await memberinfo()
		if (res.data.code == 1) {
			contentobj.value = res.data.data
			if (id) {
				active.value = contentobj.value.vip.findIndex(item => item.id == id)
			}
		}
	}

	async function lijikaitong() {
		if (active.value == -1) {
			uni.showToast({
				title: '请选择开通的权益',
				icon: 'none'
			})
			return
		}
		const res = await viporder({
			vid: contentobj.value.vip[active.value]['id']
		})
		if (res.data.code == 1) {
			var payobj = res.data.data.pay
			uni.requestPayment({
				timeStamp: String(payobj.timestamp),
				nonceStr: payobj.noncestr,
				package: payobj.package,
				signType: 'MD5',
				paySign: payobj.sign,
				success(res) {
					setTimeout(() => {
						uni.showToast({
							title: '开通成功',
							icon: 'none'
						})
					}, 500)
					uni.navigateBack()
				},
				fail(e) {
					setTimeout(() => {
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						})
					}, 500)

				}
			})

		} else {
			uni.showToast({
				title: res.data.msg,
				icon: 'none'
			})
		}
	}

	function timestampfun(time) {
		const date = new Date(time);
		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, "0");
		const day = String(date.getDate()).padStart(2, "0");
		const hours = String(date.getHours()).padStart(2, "0");
		const minutes = String(date.getMinutes()).padStart(2, "0");
		const seconds = String(date.getSeconds()).padStart(2, "0");
		const formattedDate = `${year}-${month}-${day}`;
		return formattedDate
	}
</script>

<style lang="scss">
	.active {
		color: #75B467 !important;
	}

	.dise {
		background: #D0ECC8 !important;
	}

	.back {
		background: #489D41 !important;
		color: #FFFFFF !important;
	}

	.memberquanyi {
		width: 100%;
		overflow: hidden;
		position: relative;

		.backimg {
			width: 100%;
			height: 750rpx;
			z-index: -1;
			position: absolute;
		}

		.fixedbox {
			width: 100%;
			height: 184rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -4rpx 4rpx 0rpx rgba(0, 0, 0, 0.08);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			overflow: hidden;
			position: fixed;
			bottom: 0%;

			.centerbox {
				width: 686rpx;
				height: 88rpx;
				background: #7EBC79;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				text-align: center;
				line-height: 88rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
				margin: 22rpx auto;
			}
		}

		.bottomcontent {
			width: 100%;
			overflow: hidden;
			margin-top: 488rpx;
			position: relative;

			.bottomcontentback {
				width: 750rpx;
				height: 1502rpx;
				position: absolute;
				z-index: -1;

			}

			.quanyisshuom {
				width: 686rpx;
				margin: auto;
				margin-top: 32rpx;
				overflow: hidden;

				.miaoshu {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #4E5969;
					margin-top: 16rpx;
				}

				.headerbox {
					display: flex;
					align-items: center;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #1D2129;

					.box {
						width: 6rpx;
						height: 36rpx;
						background: #7EBC79;
						border-radius: 0rpx 24rpx 24rpx 0rpx;
						margin-right: 12rpx;
					}
				}
			}

			.quanyiboxs {
				width: 718rpx;
				margin-left: 32rpx;

				.scroll-view_H {
					white-space: nowrap;
					width: 100%;

					.scroll-view-item_H {
						display: inline-block;
						width: 224rpx;
						height: 268rpx;
						background: #FFFFFF;
						box-shadow: 0rpx 8rpx 8rpx 0rpx #D0ECC8;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						border: 2rpx solid #7EBC79;
						margin-right: 28rpx;
						position: relative;

						.rightbox {
							width: 104rpx;
							height: 40rpx;
							position: absolute;
							left: 0%;
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 20rpx;
							color: #FFFFFF;
							top: 0%;
							text-align: center;
							background: #92CA86;
							line-height: 40rpx;
							border-radius: 8rpx 0 12rpx 0rpx;
						}

						.title {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #4E5969;
							margin-top: 66rpx;
							width: 100%;
							text-align: center;
						}

						.jiage {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 40rpx;
							color: #4E5969;
							margin-top: 12rpx;
							width: 100%;
							text-align: center;
						}

						.xsyhbox {
							width: 224rpx;
							height: 54rpx;
							background: #ECF6E9;
							box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(255, 214, 154, 0.26);
							border-radius: 0rpx 0rpx 14rpx 14rpx;
							text-align: center;
							line-height: 54rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 24rpx;
							color: #4E5969;
							background: #ECF6E9;
							position: absolute;
							bottom: 0%;
						}

						.hxjg {
							font-weight: 400;
							font-size: 20rpx;
							color: #949494;
							position: relative;
							width: 60rpx;
							margin: auto;

							.hx {
								position: absolute;
								top: 50%;
								width: 56rpx;
								height: 2rpx;
								background: #949494;
							}
						}
					}
				}
			}

			.goumaiquanyi {
				height: 35.12rpx;
				width: 526rpx;
				margin: auto;
				margin-top: 90rpx;
			}

			.usercontent {
				width: 632rpx;
				margin-left: 62rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				margin-top: 44rpx;

				.rightimg {
					width: 238rpx;
					height: 258rpx;
					margin-left: 34rpx;
				}


				.leftbox {
					width: 352rpx;
					overflow: hidden;

					.images {
						width: 100%;
						display: flex;
						align-items: center;
						margin-top: 58rpx;

						.img1 {
							width: 44rpx;
							height: 44rpx;
						}

						.img2 {
							width: 298rpx;
							height: 40rpx;
							margin-left: 10rpx;
						}
					}

					.userline {
						width: 100%;
						display: flex;
						align-items: center;

						.avtar {
							width: 82rpx;
							height: 82rpx;
							border-radius: 50%;
						}

						.usertext {
							width: 262rpx;
							margin-left: 16rpx;

							.t1 {
								font-family: PingFang SC, PingFang SC;
								font-weight: bold;
								font-size: 32rpx;
								color: #4A833F;
							}

							.t2 {
								font-weight: 400;
								font-size: 20rpx;
								color: rgba(74, 131, 63, 0.84);
								margin-top: 12rpx;
							}
						}
					}
				}
			}
		}
	}
</style>